<!--  -->
<template>
  <div class="search">
    <div class="search-top">
      <i class="iconfont icon-zuojiantou" @click="$router.push('/home')"></i>
      <div class="search-top-ipt">
        <i class="iconfont icon-sousuo-"></i>
        <input
          type="text"
          v-model="ipt"
          @keydown="keyDownIf"
          placeholder="搜索商品"
          @input="changeSearch"
        />
      </div>
      <button @click="Search">搜索</button>
    </div>
    <div class="search-main">
      <div
        v-for="(item1, index1) in searchList ? searchList : []"
        :key="index1"
        class="search-main-box"
      >
        <div
          v-for="(item2, index2) in item1"
          :key="index2"
          class="search-main-list"
        >
          <div>{{ item2.name }}</div>
          <img :src="item2.image_src" alt="" />
          <button>点击了解详情</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiGetFloor } from "../../api/home";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      ipt: "",
      timer: null,
      floorList: [],
      searchList: [],
      newList: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    changeData() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.Search();
      }, 1000);
    },
  },
  //方法集合
  methods: {
    getListData() {
      let newArr = [];
      this.floorList.forEach((item) => {
        // 筛选子项
        let data = item.product_list.filter((item1) => {
          return item1.name.includes(this.ipt);
        });
        newArr.push(data);
      });
      this.searchList = newArr;
    },
    Search() {
      if (this.ipt) {
        this.getListData();
      } else {
        this.searchList = [];
      }
    },
    changeSearch() {
      if (this.ipt) {
        console.log(1);
      } else {
        this.searchList = [];
      }
    },
    keyDownIf(e) {
      if (e.keyCode === 13) {
        this.getListData();
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    apiGetFloor().then((res) => {
      this.floorList = res.message;
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.search {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.search-top {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 3.125rem;
}
.search-top > i {
  font-size: 1.5rem;
  font-weight: bold;
  color: rgb(185, 185, 185);
}
.search-top-ipt {
  width: 70%;
  height: 1.875rem;
  background: rgb(245, 245, 245);
  display: flex;
  align-items: center;
  border-radius: 1.25rem;
  padding: 0 0.625rem;
}
.search-top-ipt input {
  width: 85%;
  height: 100%;
  outline: none;
  border: none;
  background: rgb(245, 245, 245);
  padding: 0 0.625rem;
}
.search-top button {
  width: 2.5rem;
  height: 1.8725rem;
  background: orangered;
  color: #fff;
  outline: none;
  border: none;
  line-height: 1.8725rem;
  border-radius: 0.1875rem;
}
.search-main {
  flex: 1;
  background: #eee;
  overflow: auto;
}
.search-main-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.search-main-list {
  width: 100%;
  height: 12.5rem;
  background: #fff;
  margin-top: 0.625rem;
  text-align: center;
  border-radius: 0.3125rem;
}
.search-main-list button {
  width: 8.125rem;
  height: 1.875rem;
  line-height: 1.875rem;
  outline: none;
  border: none;
  background: orangered;
  color: #fff;
  border-radius: 1.25rem;
  margin-top: 0.625rem;
}
.search-main-list img {
  width: 80%;
  height: 6.25rem;
  object-fit: cover;
  border-radius: 0.3125rem;
}
.search-main-list div {
  height: 2.5rem;
  line-height: 2.5rem;
  font-weight: bold;
}
</style>
